{% extends 'layouts/base.html' %}
{% load static %}

{% block content %}

  <div class="page-wrapper">
    <!-- Page header -->
    <div class="page-header d-print-none">
      <div class="container-xl">
        <div class="row g-2 align-items-center">
          <div class="col">
            <h2 class="page-title">
              Cards Masonry
            </h2>
          </div>
        </div>
      </div>
    </div>
    <!-- Page body -->
    <div class="page-body">
      <div class="container-xl">
        <div class="row row-cards" data-masonry='{"percentPosition": true }'>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="200"></line>
                  <line x1="0" y1="200" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="150" viewBox="0 0 400 150" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="150"></line>
                  <line x1="0" y1="150" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="400" viewBox="0 0 400 400" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="400"></line>
                  <line x1="0" y1="400" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="300" viewBox="0 0 400 300" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="300"></line>
                  <line x1="0" y1="300" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="350" viewBox="0 0 400 350" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="350"></line>
                  <line x1="0" y1="350" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="600" viewBox="0 0 400 600" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="600"></line>
                  <line x1="0" y1="600" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="700" viewBox="0 0 400 700" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="700"></line>
                  <line x1="0" y1="700" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="200"></line>
                  <line x1="0" y1="200" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="150" viewBox="0 0 400 150" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="150"></line>
                  <line x1="0" y1="150" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="250" viewBox="0 0 400 250" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="250"></line>
                  <line x1="0" y1="250" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="50" viewBox="0 0 400 50" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="50"></line>
                  <line x1="0" y1="50" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="400" viewBox="0 0 400 400" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="400"></line>
                  <line x1="0" y1="400" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="300" viewBox="0 0 400 300" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="300"></line>
                  <line x1="0" y1="300" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
              <div class="card-body p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-100" preserveAspectRatio="none" width="400" height="200" viewBox="0 0 400 200" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
                  <line x1="0" y1="0" x2="400" y2="200"></line>
                  <line x1="0" y1="200" x2="400" y2="0"></line>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% include 'includes/footer.html' %}
  </div>

{% endblock content %}

{% block extrajs %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" defer></script>
{% endblock extrajs %}